<script setup lang="tsx">
import { PlusSearch, type PlusColumn } from "plus-pro-components";
import "plus-pro-components/es/components/search/style/css";
import { ref } from "vue";
import { useColumns } from "./charge_columns";

const props = defineProps({
  userId: {
    type: Number,
    default: 0
  }
});
const searchColumns: PlusColumn[] = [
  {
    label: "搜索",
    width: 200,
    prop: "keyWord",
    valueType: "copy",
    tooltip: "请输入搜索关键词"
  },
  {
    label: "搜索",
    width: 200,
    prop: "keyWord",
    valueType: "copy",
    tooltip: "请输入搜索关键词"
  },
  {
    label: "搜索",
    width: 200,
    prop: "keyWord",
    valueType: "copy",
    tooltip: "请输入搜索关键词"
  },
  {
    label: "选择时间范围",
    labelWidth: 120,
    prop: "dateRange",
    valueType: "date-picker",
    tooltip: "请选择时间段",
    fieldProps: {
      type: "daterange",
      startPlaceholder: "开始时间",
      endPlaceholder: "结束时间",
      format: "YYYY-MM-DD",
      valueFormat: "YYYY-MM-DD"
    }
  },
  {
    label: "处理时间",
    labelWidth: 120,
    width: 600,
    prop: "handleTime",
    valueType: "date-picker",
    tooltip: "请选择时间",
    fieldProps: {
      type: "date",
      placeholder: "处理时间",
      format: "YYYY-MM-DD",
      valueFormat: "YYYY-MM-DD"
    }
  },
  {
    label: "状态",
    prop: "status",
    valueType: "select",
    options: [
      {
        label: "待处理",
        value: "0",
        color: "red"
      },
      {
        label: "成功",
        value: "1",
        color: "blue"
      },
      {
        label: "驳回",
        value: "2",
        color: "green"
      }
    ]
  }
];
const handleSearch = (value: any) => {
  console.log(value, "search");
  onKeywordChange(value);
};
const handleReset = value => {
  console.log("reset", value);
  onKeywordChange(value);
};
const handleChange = (value: any, target: any) => {
  console.log("change", value);
  if (target.prop == "keyWord") {
    return;
  }
  onKeywordChange(value);
};

const {
  loading,
  columns,
  dataList,
  pagination,
  loadingConfig,
  adaptiveConfig,
  onSizeChange,
  onKeywordChange,
  onCurrentChange
} = useColumns(props.userId);
</script>

<template>
  <ElCard>
    <template #header>
      <ElPageHeader :icon="null">
        <template #title>
          <h3>充值列表</h3>
        </template>
        <PlusSearch
          class="mt-5"
          :hasUnfold="false"
          :columns="searchColumns"
          @reset="handleReset"
          @change="handleChange"
          @search="handleSearch"
        />
      </ElPageHeader>
    </template>
    <pure-table
      ref="tableRef"
      showOverflowTooltip
      border
      :adaptive="false"
      :adaptiveConfig="adaptiveConfig"
      row-key="id"
      alignWhole="center"
      :loading="loading"
      :loading-config="loadingConfig"
      :data="dataList"
      :columns="columns"
      :pagination="pagination"
      @page-size-change="onSizeChange"
      @page-current-change="onCurrentChange"
    >
      <template #status="{ row }">
        <el-tag v-if="row.status == '1'" type="success">成功</el-tag>
        <el-tag v-else-if="row.status == '2'" type="danger">失败</el-tag>
        <el-tag v-else type="primary">待处理</el-tag>
      </template>
      <template #voucherimage="{ row, index }">
        <el-image
          preview-teleported
          loading="lazy"
          :src="row.voucherimage"
          :preview-src-list="dataList.map(v => v.voucherimage)"
          :initial-index="index"
          fit="cover"
          class="w-[50px] h-[50px]"
        />
      </template>
    </pure-table>
  </ElCard>
</template>

<style scoped></style>
